<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div style="width:900px;height:15px;border:1px solid gray">
		<div id="prog" style="height:100%;width:0%;background:orange"></div>
		<span id="prod">0%</span>
	</div>

	<form cation="" method="post" enctype="multipart/form-data" target="frm">
		<p><input type="file" name="pic" /> </p>
		<p><input type="submit" name="pic" value="提交" /> </p>
	</form>
</body>
<script type="text/javascript">
	var fom = document.getElementsByTagName('form')[0];
	fom.onsubmit = function(){
		var fmdata = new FormData(this);
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(){
			if(this.readyState == 4){
				alert(this.responseText);
			}
		}

		xhr.upload.onprogress = function(ev){
			var jd = Math.floor(100*(ev.loaded/ev.total));
			document.getElementById('prog').style.width = jd + "%";
			document.getElementById('prod').innerHTML = jd + "%";
		}

		xhr.open('post','13.php',true);
		xhr.send(fmdata);
		return false;
	}
</script>
</html>